<template>
	<view class="page">
		<uni-nav-bar :fixed="true" :statusBar="true" left-icon="left" title="发布车源" @clickLeft="back" />

		<view class="screenBox" :style="{top:offsetTop+'px'}">
			<view class="screenBox_status">
				<view class="screenBox_status_item" :class="{'screenBox_status_active':param.news_cars_status==1}"
					@click="setStatus(1)">
					<image v-if="param.news_cars_status==1" class="screenBox_status_item_icon"
						src="@/static/carSource-car1.png" mode="widthFix"></image>
					<image v-else class="screenBox_status_item_icon" src="@/static/carSource-car2.png" mode="widthFix">
					</image>
					<text>出售中</text>
				</view>
				<view class="screenBox_status_item" :class="{'screenBox_status_active':param.news_cars_status==0}"
					@click="setStatus(0)">
					<image v-if="param.news_cars_status==0" class="screenBox_status_item_icon"
						src="@/static/carSource-car1.png" mode="widthFix"></image>
					<image v-else class="screenBox_status_item_icon" src="@/static/carSource-car2.png" mode="widthFix">
					</image>
					<text>已下架</text>
				</view>
			</view>
			<view class="screenBox_params">
				<view class="screenBox_params_item" @click="_showParamDetail(0)">
					<view class="screenBox_params_item_show">
						<view class="screenBox_params_item_show_value text-overflow1">选择车型</view>
						<image class="screenBox_params_item_show_icon" src="@/static/downArrorw-black.png"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="screenBox_params_item" @click="_showParamDetail(1)">
					<view class="screenBox_params_item_show">
						<view class="screenBox_params_item_show_value text-overflow1">外观/内饰</view>
						<image class="screenBox_params_item_show_icon" src="@/static/downArrorw-black.png"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="screenBox_params_item" @click="_showParamDetail(2)">
					<view class="screenBox_params_item_show">
						<view class="screenBox_params_item_show_value text-overflow1">全部地区</view>
						<image class="screenBox_params_item_show_icon" src="@/static/downArrorw-black.png"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="screenBoxOverlay" v-if="showParamDetail" @click="showParamDetail=false">
			<view class="screenBoxPopup" :style="{marginTop:offsetTop+106+'px'}" @tap.stop="showParamDetail=true">
				<view class="brand-list" v-if="paramTabIndex==0">
					<view class="brand-item" v-for="(item,index) in models" :key="index" @tap.stop="setModels(item)">
						<view class="brand-item_name" :class="{'text-blue':search.brand_id==item.id}">{{item.name}}
						</view>
						<view class="brand-item_num">{{item.num}}条</view>
					</view>
				</view>
				<view class="wgns" v-if="paramTabIndex==1">
					<view class="wgns_item">
						<view class="wgns_item_name">外观</view>
						<view class="wgns_item_list">
							<block v-for="(item,index) in colors.appearance" :key="index">
								<view class="wgns_item_list_item" @click="appearanceClick(item)"
									:class="{'wgns_item_list_active':item.name===search.appearance_name}">
									{{item.name}}({{item.num}})
								</view>
							</block>
						</view>
					</view>
					<view class="wgns_item">
						<view class="wgns_item_name">内饰</view>
						<view class="wgns_item_list">
							<block v-for="(item,index) in colors.interior" :key="index">
								<view class="wgns_item_list_item" @click="interiorClick(item)"
									:class="{'wgns_item_list_active':item.name===search.interior_name}">
									{{item.name}}({{item.num}})
								</view>
							</block>
						</view>
					</view>
					<view class="wgns_bottom">
						<view class="wgns_bottom_btn wgns_bottom_reset"
							@tap.stop=";search.appearance_name='',search.interior_name=''">重置</view>
						<view class="wgns_bottom_btn wgns_bottom_confirm" @tap.stop="_getList(true)">查看车源
						</view>
					</view>
				</view>
				<view class="area" v-if="paramTabIndex==2&&citys.length>0">
					<scroll-view class="area_left" :scroll-y="true">
						<view class="area_item border-bottom" v-for="(item,index) in citys" :key="index"
							@tap.stop="setProvince(index,item)">
							<view class="area_name">{{item.name}}</view>
						</view>
					</scroll-view>
					<scroll-view class="area_right" :scroll-y="true">
						<view class="area_item border-bottom" v-for="(item,index) in citys[citysIndex].children"
							:key="index" @tap.stop="setCity(item)">
							<view class="area_name">{{item.name}}</view>
							<view class="area_num">{{item.num}}条</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<scroll-view :style="{height:`calc(100vh - ${offsetTop+88}px)`}" scroll-y="true" class="list"
			refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="45"
			@refresherrefresh="onRefresh" @scrolltolower="_getList(false)">

			<view class="list_item" v-for="(item,index) in list.data" :key="index">
				<view class="list_item_top" @click="carDetail(item)">
					<view class="list_item_left" v-if="isEdit" @click="clickCheckbox(item,index)">
						<image v-if="item.checked" class="list_item_left_img" src="@/static/check-mark.png" mode="">
						</image>
						<image v-else class="list_item_left_img" src="@/static/check-no.png" mode=""></image>

					</view>
					<view class="list_item_right">
						<view class="list_item_name marginBottom20">
						<text style="flex: 1;">{{item.cars_name}}</text>
						<view class="topping-box" v-if="item.topping">顶</view>
						</view>
						<view class="list_item_desc marginBottom20">{{item.source_type_source_name}}
							{{item.appearance_interior}} {{item.location_name}}
						</view>
						<view class="list_item_price marginBottom20">
							<text class="boldPrice" style="margin-right: 0;" v-if="item.remarks_name">{{item.remarks_name}}：</text>
							<text class="boldPrice">{{item.price}}{{item.price=='电议'?'':'万'}}</text>
							<text v-if="item.guide_price">指导价：{{item.guide_price}}万 <text style="margin-left:10rpx;" v-if="item.quotation_name">| {{item.quotation_name}}</text></text>
							
						</view>
						<view class="list_item_time marginBottom20">发布时间：{{item.create_time}}</view>
					</view>
				</view>
				<view class="list_item_bottom" v-if="!isEdit">
					<view @tap.stop="seItemTop(item,index)" v-if="param.news_cars_status==1"
						class="list_item_bottom_btn">置顶</view>
					<view v-if="param.news_cars_status==1" @tap.stop="setItemStatus([item.id],0)"
						class="list_item_bottom_btn">下架</view>
					<view v-if="param.news_cars_status==0" @tap.stop="setItemStatus([item.id],1)"
						class="list_item_bottom_btn">上架</view>
					<view @tap.stop="jumpUrl('/pages/carSource/push/edit?id='+item.id)" class="list_item_bottom_btn">编辑
					</view>
					<view @tap.stop="setItemPrice(item,index)" class="list_item_bottom_btn">改价</view>
				</view>

			</view>
			<image class="emptyData" v-if="list.total==0" src="@/static/empty.png" mode=""></image>
		</scroll-view>
		<block v-if="param.news_cars_status==1">
			<view class="tabBox" v-if="refreshTime>0">
				<uni-countdown :show-day="false" :fontSize="10" color="#ffffff" splitorColor="#ffffff"
					:second="refreshTime" />
			</view>
			<view class="tabBox" :class="{rotate:refreshLoading}" v-else @click="_refreshOrder()">
				<image class="refresh" src="@/static/refresh.png" mode=""></image>
			</view>
		</block>
		<view class="fixed-bottom">
			<view v-if="isEdit" class="editOpt">
				<view class="checkedAll" @click="setCheckboxAll()">
					<image v-if="checkedAll" class="list_item_left_img" src="@/static/check-mark.png" mode=""></image>
					<image v-else class="list_item_left_img" src="@/static/check-no.png" mode=""></image>
					<text style="margin-left: 20rpx;">全选</text>
				</view>
				<view class="btns">
					<view class="btn btn-plain" style="width: 160rpx;" @click="handleDel()">删除</view>
					<view v-if="param.news_cars_status==1" class="btn btn-plain"
						style="width: 160rpx;margin-left: 20rpx;" @click="handleUp(0)">下架</view>
					<view v-else class="btn btn-plain" style="width: 160rpx;margin-left: 20rpx;" @click="handleUp(1)">上架
					</view>
					<view class="btn btn-plain-grap" style="width: 160rpx;" @click="isEdit=false">取消</view>
				</view>
			</view>
			<view v-else class="btns">
				<view class="btn" style="width: 340rpx;" @click="showPush=true">发布</view>
				<view class="btn btn-plain" style="width: 340rpx;" @click="isEdit=true">编辑</view>
			</view>
		</view>
		<view class="screenBoxOverlay2" v-if="showPush" @click="showPush=false">
			<view class="pushBox btns">
				<view class="btn btn-plain" style="width: 340rpx;" @click="jumpUrl('/pages/carSource/select/type')">
					<image class="btn_icon" src="@/static/carSource-push1.png" mode="heightFix"></image>
					<text>单条发布</text>
				</view>
				<view class="btn btn-plain" style="width: 340rpx;" @click="jumpUrl('/pages/carSource/push/multi')">
					<image class="btn_icon" src="@/static/carSource-push1.png" mode="heightFix"></image>
					<text>批量发布</text>
				</view>
			</view>
		</view>
		<uni-popup :safeAreaInsetBottom="false" ref="price" background-color="transparent">
			<view class="selectBox">
				<view class="selectBox_title">报价优惠</view>
				<view class="quotationBox" v-if="itemInfo.guide_price">
					<block v-for="(item,index) in quotationOption">
						<view class="quotationBox_item" :class="{'quotationBox_active':index==itemInfo.quotation}"
							@click="setQuotation(index)">
							{{item.name}}
						</view>
					</block>
				</view>
				<view class="customBox">
					<view class="input-box">
						<input :adjust-position="false" @blur="keyboardHeight=0" :cursorSpacing="20" v-model="price" type="digit" class="input"
							:placeholder="quotationOption[itemInfo.quotation].placeholder" />
						<view class="suffix">{{quotationOption[itemInfo.quotation].unit}}</view>
					</view>
					<view class="btn" style="width: 173rpx;" @click="setCustomPrice()">确定</view>
				</view>
			</view>
			<view :style="{height:keyboardHeight+'px'}"></view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		newsCarsList,
		newsCarsCondition,
		newsCarsColour,
		newsCarsCity,
		newsCarsRenewTime,
		newsCarsTopping,
		newsCarsStatusAll,
		newsCarsDeleteAll,
		newsCarsChangePrice,
	} from '@/api/source.js'
	export default {
		data() {
			return {
				keyboardHeight:0,
				refreshLoading:false,//是否启动刷新动画
				_freshing: false,
				triggered: false,
				offsetTop: uni.getSystemInfoSync().statusBarHeight + 44 || 44,
				paramTabIndex: 0,
				showPush: false,
				showParamDetail: false,
				checkedAll: false,
				isEdit: false,
				refreshTime: 0,
				checkedIds: [],
				news_cars_renew: 1, //1：可进行更新 其他倒计时（时间戳）
				list: {
					current_page: 0,
					last_page: 1,
					per_page: 15,
					total: 0,
					data: []
				},
				models: [],
				colors: {
					appearance: [],
					interior: [],
				},
				citys: [],
				citysIndex: 0,
				param: {
					users_id: '',
					news_cars_status: 1
				},
				search: {
					brand_id: '',
					appearance_name: '',
					interior_name: '',
					city_id: '',
					page_num: 15,
					page: 1,
				},
				price: '',
				itemIndex: 0,
				itemInfo: {},
				quotationOption: {
					1: {
						short: '优惠',
						name: '优惠点数',
						unit: '点',
						placeholder: '请输入优惠点数'
					},
					2: {
						short: '优惠',
						name: '优惠万元',
						unit: '万元',
						placeholder: '请输入优惠钱数'
					},
					3: {
						short: '加价',
						name: '加价万元',
						unit: '万元',
						placeholder: '请输入加价钱数'
					},
					4: {
						short: '报价',
						name: '直接报价',
						unit: '万元',
						placeholder: '请直接输入价格'
					},
				},

			}
		},
		onLoad() {
			uni.hideTabBar();
		},
		async onShow() {
			const usersId= await uni.getStorageSync('login').id || '';
			if(usersId==''){
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return;
			}else{
				this.param.users_id=usersId;
			}
			this._getList(true);
			this._newsCarsCondition();
			this._newsCarsColour();
			this._newsCarsCity();
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight=res.height
			})
		},
		onUnload() {
			uni.offKeyboardHeightChange();
		},
		onReachBottom() {
			// this._getList(false);
		},
		methods: {
			// 点击外观
			appearanceClick(item){
				this.search.appearance_name = item.name
				this._newsCarsColour()
			},
			// 点击内饰
			interiorClick(item){
				this.search.interior_name = item.name
				this._newsCarsColour()	
			},
			carDetail(data){
				if(this.param.news_cars_status == 1){
					uni.navigateTo({
						url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + data.id
					})
				}
				
			},
			handleDel() {
				if (this.checkedIds.length == 0) {
					uni.showToast({
						title: '至少选择一项',
						icon: 'none',
						mask: true
					});
					return;
				}
				newsCarsDeleteAll({
					id: this.checkedIds,
					users_id: this.param.users_id
				}).then((res) => {
					this.isEdit = false;
					if(res.code==0){
						this._getList(true);
					}
					uni.showToast({
						title: res.message,
						icon: 'none',
						mask: true
					});
				})
			},
			handleUp(state) {
				if (this.checkedIds.length == 0) {
					uni.showToast({
						title: '至少选择一项',
						icon: 'none',
						mask: true
					});
					return;
				}
				this.setItemStatus(this.checkedIds, state)
				this.isEdit = false;
			},
			setStatus(val) {
				this.param.news_cars_status = val;
				this._getList(true);
			},
			setProvince(index, item) {
				this.citysIndex = index;
				if (item.id == '') {
					this.search.city_id = '';
					this._getList(true);
				}
			},
			setCity(item) {
				this.search.city_id = item.id || '';
				this._getList(true);
			},
			setModels(item) {
				this.search.brand_id = item.id;
				this._newsCarsColour()
				this._getList(true);
			},
			seItemTop(item, index) {
				newsCarsTopping({
					id: item.id,
					users_id: this.param.users_id,
					topping: item.topping > 0 ? 0 : 1
				}).then((res) => {
					if(res.code==0){
						this._getList(true);
					}
					uni.showToast({
						title: res.message,
						icon: 'none',
						mask: true
					});
				})
			},
			setItemStatus(id, news_cars_status) {
				newsCarsStatusAll({
					id,
					news_cars_status,
					users_id: this.param.users_id
				}).then((res) => {
					if(res.code==0){
						this._getList(true);
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				})
			},
			setItemPrice(item, index) {
				this.price=item.quotation_price;
				this.itemInfo = item;
				this.itemIndex = index;
				this.$refs.price.open('bottom');
			},
			setQuotation(index) {
				this.price = ''
				this.itemInfo.quotation = index
			},
			setCustomPrice() {
				let that = this;
				if (this.price == '') {
					uni.showToast({
						title: this.quotationOption[this.itemInfo.quotation].placeholder,
						icon: 'none',
						mask: true
					});
					return
				}
				let param = {
					"id": this.itemInfo.id,
					"users_id": this.param.users_id,
					"model_two_id": this.itemInfo.model_two_id,
					"quotation": this.itemInfo.quotation,
					"quotation_price": parseInt(this.price)
				}
				// console.log(JSON.stringify(param));
				newsCarsChangePrice(param).then((res) => {
					that.$refs.price.close();
					if(res.code==0){
						this._getList(true);
					}
					uni.showToast({
						title: res.message,
						icon: 'none',
						mask: true
					});
				})

			},
			_getList(refresh) {

				this.showParamDetail = false;
				let that = this
				if (refresh) {
					this.checkedAll = false;
					this.isEdit = false;
					this.checkedIds = [];
					var page = 1;
					that.list.last_page = 1;
				} else {
					var page = that.list.current_page + 1;
				}
				let param = this.param;
				Object.assign(param, this.search);
				param.page = page;
				if (page <= that.list.last_page) {
					console.log(param)
					newsCarsList(param).then((result) => {
						that.refreshLoading=false;
						that.news_cars_renew = result.data.news_cars_renew;
						if (that.news_cars_renew != 1) {
							that.refreshTime = that.news_cars_renew;
						} else {
							that.refreshTime = 0;
						}
						let list = result.data.list
						if (list.current_page > 1) {
							that.list.current_page = list.current_page;
							list.data.map((item) => {
								item.checked = false;
								that.list.data.push(item)
							});
						} else {
							that.list = list;
							that.list.data = list.data.map((item) => {
								item.checked = false;
								return item;
							});;
						}
						// uni.stopPullDownRefresh();
					})
				}
			},
			async onRefresh() {
				let that = this;
				if (this._freshing) return;
				this.triggered = true;
				this._freshing = true;
				await this._getList(true);
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)

			},
			_newsCarsCondition() {
				let param = this.param;
				Object.assign(param, this.search);
				newsCarsCondition(param).then((res) => {
					this.models = res.data || [];
				})
			},
			_newsCarsColour() {
				let param = this.param;
				Object.assign(param, this.search);
				newsCarsColour(param).then((res) => {
					this.colors = res.data;
				})
			},
			_newsCarsCity() {
				let param = this.param;
				Object.assign(param, this.search);
				newsCarsCity(param).then((res) => {
					this.citys = res.data || [];
				})
			},
			_refreshOrder() {
				this.refreshLoading=true;
				newsCarsRenewTime({
					users_id: this.param.users_id
				}).then((res) => {
					this._getList(true);
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url
				})
			},
			clickCheckbox(item, index) {
				this.list.data[index].checked = !this.list.data[index].checked;
				this.setCheckedIds();
				this.checkboxIsAll();
			},
			checkboxIsAll() {
				const hasFalse = this.list.data.find(obj => obj.checked === false);
				if (hasFalse) {
					this.checkedAll = false
				} else {
					this.checkedAll = true
				}
			},
			setCheckboxAll() {
				this.checkedAll = !this.checkedAll;
				this.list.data.map((item) => {
					item.checked = this.checkedAll
				})
				this.setCheckedIds();
			},
			setCheckedIds() {
				let ids = [];
				this.list.data.map((item) => {
					if (item.checked) {
						ids.push(item.id)
					}
				})
				console.log(ids);
				this.checkedIds = ids;
			},
			_showParamDetail(index) {
				if (this.paramTabIndex == index) {
					this.showParamDetail = !this.showParamDetail;
				} else {
					this.showParamDetail = true;
				}
				this.paramTabIndex = index;

			},
			back() {
				uni.navigateBack({
					fail() {
						uni.switchTab({
							url: '/main/home/index/index'
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 162rpx;
	}

	/deep/.uni-navbar--border {
		border-bottom-width: 0 !important;
	}

	.screenBox {
		width: 100%;
		position: fixed;
		z-index: 998;
		top: 64px;
		left: 0;
		background-color: #fff;

		&_status {
			padding: 20rpx 28rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			&_item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 340rpx;
				height: 92rpx;
				background: #F7F8FA;
				border-radius: 14rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;

				&_icon {
					width: 54rpx;
					height: 40rpx;
					margin-right: 18rpx;
				}
			}

			&_active {
				background: #2D56C5;
				color: #FFFFFF;
			}
		}

		&_params {
			display: flex;
			justify-content: space-between;

			&_item {
				padding: 30rpx 28rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;

				&_show {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;

					&_icon {
						width: 16rpx;
						height: 10rpx;
						margin-left: 12rpx;
					}
				}
			}
		}
	}

	.screenBoxOverlay2 {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.screenBoxOverlay {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.2);

		.screenBoxPopup {
			padding-top: 9px;
			max-height: calc(100vh - 260px);
			overflow: auto;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 14rpx 14rpx;

			.brand-list {
				padding: 0 28rpx;
				box-sizing: border-box;

				.brand-item {
					padding: 30rpx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #F2F2F2;

					&_name {
						font-size: 28rpx;
						color: #000000;
					}

					&_num {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.brand-item:last-child {
					border: none;
				}
			}

			.wgns {
				padding: 28rpx;
				box-sizing: border-box;

				&_item {
					margin-bottom: 49rpx;

					&_name {
						font-size: 30rpx;
						font-weight: 800;
						color: #000000;
						margin-bottom: 30rpx;
					}

					&_list {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;

						&_item {
							padding: 18rpx 31rpx;
							box-sizing: border-box;
							background: #F7F8FA;
							border-radius: 30rpx;
							font-size: 24rpx;
							color: #000000;
							margin: 0 16rpx 20rpx 0;
						}

						&_active {
							background: #0E59EA;
							color: #FFFFFF;
						}
					}
				}

				&_bottom {
					display: flex;
					justify-content: space-between;

					&_btn {
						width: 274rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: #F2F2F2;
						border-radius: 14rpx;
						font-size: 28rpx;
						color: #000000;
					}

					&_confirm {
						width: 400rpx;
						color: #ffffff;
						background: #0E59EA;
					}
				}
			}

			.area {
				display: flex;

				&_left {
					height: calc(100vh - 270px);
					padding: 0 28rpx;
					box-sizing: border-box;
					width: 204rpx;
				}

				&_right {
					height: calc(100vh - 270px);
					padding: 0 28rpx;
					box-sizing: border-box;
					width: calc(100% - 204rpx);
					border-left: 1rpx solid #F2F2F2;
					// box-shadow: -5px 0px 16rpx rgba(0, 0, 0, 0.1);
				}

				&_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 85rpx;
				}

				&_name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}
	}

	.list {
		flex: 1;
		padding: 250rpx 28rpx 0;
		box-sizing: border-box;

		&_item {
			padding: 30rpx 20rpx 0;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			&_top {
				display: flex;
				align-items: flex-start;
			}

			&_left {
				width: 60rpx;

				&_img {
					width: 42rpx;
					height: 42rpx;
				}
			}

			&_right {
				flex: 1;
			}

			&_name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
				display: flex;
				flex-direction: row;
			}
			.topping-box{
				margin-left: 20rpx;
				background-color: #EC4B4B;
				color: #FFFFFF;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: 28rpx;
			}

			&_desc {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			&_price {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;

				.boldPrice {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #EC4B4B;
					margin-right: 30rpx;
				}
			}

			&_time {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			&_bottom {
				padding: 20rpx 0;
				border-top: 1rpx solid #E6E6E6;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				&_btn {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					background: #FFFFFF;
					border: 1px solid #999999;
					border-radius: 25rpx;
					box-sizing: border-box;
					margin-left: 18rpx;
				}

				&_btn:first-child {
					margin-left: 0;
				}
			}
		}


	}

	.marginBottom20 {
		margin-bottom: 20rpx;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 41rpx 28rpx;
		width: 100%;
		z-index: 98;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);

		.editOpt {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.checkedAll {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #000000;
		}
	}

	.pushBox {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: fixed;
		z-index: 998;
		bottom: 160rpx;
		left: 0;
		padding: 28rpx 30rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);

	}

	.tabBox {
		width: 100rpx;
		height: 100rpx;
		background: #2D56C5;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 20rpx;
		position: fixed;
		right: 28rpx;
		bottom: 196rpx;
		z-index: 9;
	}

	.text-overflow1 {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.text-blue {
		color: #2D56C5 !important;
	}

	.border-bottom {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #2D56C5;
		border-radius: 14rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;

		&_icon {
			height: 32rpx;
			margin-right: 11rpx;
		}
	}

	.btn-plain {
		background: #FFFFFF;
		border: 1px solid #2D56C5;
		color: #2D56C5;
	}

	.btn-plain-grap {
		background: #FFFFFF;
		border: 1px solid #666666;
		color: #666666;
		margin-left: 20rpx;
	}

	.refresh {
		width: 74rpx;
		height: 63rpx;
	}

	.selectBox {
		padding: 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		&_title {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
			margin-bottom: 30rpx;
		}

		&_content {
			max-height: 50vh;
			overflow: auto;
			margin-bottom: 30rpx;
		}

		&_bottom {
			padding: 0 28rpx;
		}

		.quotationBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			padding: 0 28rpx;
			box-sizing: border-box;

			&_item {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #FFFFFF;
				border: 1px solid #CCCCCC;
				border-radius: 4rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			&_active {
				background: #0E59EA;
				color: #FFFFFF;
				border: 1px solid #0E59EA;
			}
		}

		.customBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 28rpx;
			box-sizing: border-box;

			.input-box {
				flex: 1;
				padding-right: 23rpx;
				box-sizing: border-box;
				position: relative;

				.suffix {
					position: absolute;
					right: 36rpx;
					top: 26rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF0F0F;
				}
			}

			.input {
				width: 100%;
				height: 92rpx;
				background: #F3F3F3;
				border-radius: 14rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding: 0 80rpx 0 24rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.emptyData{
		width: 498rpx;
		margin: calc(50% - 200rpx) calc(50% - 249rpx) 0;
	}

	.rotate {
		animation: rotate 1s linear infinite;
		/* 动画名称、动画时长、动画速度曲线、无限循环 */
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>